﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>
<%@ Import Namespace="System.Collections.Generic" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	测量数据图表类型
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div id="dolphincontainer">
	    <div id="dolphinnav">
	        <ul class="top_tab">
                <li><a id="graphTypeTab0" href="javascrip:void(0);" onclick="showGraphTypes(0);" class="current"><span>水位及水质</span></a></li>
                <li><a id="graphTypeTab1" href="javascrip:void(0);" onclick="showGraphTypes(1);"><span>进浆及回水</span></a></li>
                <li><a id="graphTypeTab2" href="javascrip:void(0);" onclick="showGraphTypes(2);"><span>沉降及位移</span></a></li>
                <li><a id="graphTypeTab3" href="javascrip:void(0);" onclick="showGraphTypes(3);"><span>尾矿堆积坝</span></a></li>
	        </ul>
	    </div>
	</div>
    <%
        List<SelectListItem> factories = ViewData["factories"] as List<SelectListItem>;
        List<SelectListItem> tailingponds = ViewData["stacksAndTailingponds"] as List<SelectListItem>;
    %>
    <div style="margin-top:10px">
    <form method="post" action="<%=Url.Content("~/Graph/Tailingpond") %>">
        <%=Html.Hidden("factoryId", ViewData["factoryId"]) %>
        <%=Html.Hidden("stackId", "") %>
        <%=Html.Hidden("graphType", "2")%>
        <%=Html.Hidden("subGraphType", "")%>
        <%=Html.Hidden("stackId", "") %>
        <%=Html.Hidden("graphType", 2)%>

    <div class="screen_area">
        <div>
        <%if ((bool)ViewData["showFactory"])
            {%>
        选择公司：
        <%for (int i = 0; i < factories.Count; i++)
          { 
        %>
            <a href="javascript:void(0);" value="<%=factories[i].Value %>" onclick="showStacks(<%=factories[i].Value %>);"><%=factories[i].Text%></a>
            <%if (i % 4 == 0) { %><br /><%} %>
        <%} %>

        <span style="margin-left:20px"></span>
        <%
            }
        %>
        <%if ((bool)ViewData["showStacks"])
          { 
              List<SelectListItem> stacks = ViewData["stacksAndTailingponds"] as List<SelectListItem>;
        %>
        </div>
        <div>
            <label>选择尾矿库：</label>
            <span id="stackList">
                <%for (int i = 0; i < stacks.Count; i++)
                    {
                %>
                <a href="javascript:void(0);" value="<%=stacks[i].Value %>" onclick="showStackDateRange(<%=stacks[i].Value %>);"><%=stacks[i].Text%></a>
                    <%if (i % 4 == 0){ %><br /><%} %>
                <%} %>
            </span>
        <%}
            else
            {    
        %>
        <%=Html.Hidden("stackId", 1) %>
        <%} %>
        </div>
        <div>
        <% 
            List<SelectListItem> graphTypes = ViewData["graphTypes"] as List<SelectListItem>;
        %>
        <label>图表分类：</label>
            <span id="graphTypes">
                <%for (int i = 0; i < graphTypes.Count; i++)
                    {
                %>
                <a href="javascript:void(0);" value="<%=graphTypes[i].Value %>" onclick="selectGraphType(<%=graphTypes[i].Value %>);"><%=graphTypes[i].Text%></a>
                    <%if (i % 4 == 0){ %><br /><%} %>
                <%} %>
            </span>
        </div>

        <div style="margin-top:20px">
            <label>时间范围：</label>
            <span>
                <input type="radio" id="dateType1" name="dateType" checked="checked" value="1" onclick="resetDateType();" />
            </span>
            <select id="predefinedDate" name="predefinedDate" onclick="checkDateType(1);" style="width:80px;">
                <option value="1">最近2周</option>
                <option value="2" selected="selected">最近1月</option>
                <option value="3">最近3月</option>
                <option value="4">最近6月</option>
                <option value="5">最近1年</option>
            </select>
            
            <span style="margin-left:16px">
                <input type="radio" id="dateType2" name="dateType" value="2" />
            </span>
            <label>从</label> <input type="text" name="dateFrom" id="dateFrom" size="6" class="ipt_date" readonly="readonly" onclick="checkDateType(2);" /> <label>到</label> <input type="text" name="dateTo" id="dateTo" size="6" class="ipt_date" readonly="readonly"  onclick="checkDateType(2);" />
            <span style="margin-left:20px"></span>
            
            <input type="button" onclick="return validForm();" value="确  定" />
        </div>

    </div>
        
        


    </form>
    </div>

    <div id="chartDiv" style="margin-left:10px;margin-top:10px;text-align:left;">
        <h2 id="chartName" style="margin-bottom:10px; padding:8px 0; width:740px; text-align:center; font:bold 24px/1.5em Arial,微软雅黑,宋体;"></h2>
        <div id="chartArea"></div>
    </div>

    <script type="text/javascript" language="javascript">
        $('#dateFrom').datepicker({changeMonth: true, changeYear: true});
        $('#dateTo').datepicker({changeMonth: true, changeYear: true});

        $(document).ready(function() {
            showStacks();
        });

            
        function displayChart()
        {
            var url = '<%=Url.Content("~/Graph/Display") %>';
            var factoryId = document.getElementById("factoryId").value;
            var stackId = document.getElementById("stackId").value;
            var graphType = document.getElementById("graphType").value;
            var subGraphType = document.getElementById("subGraphType").value;
            var fromDate = new Date();
            var toDate = new Date();

            if (document.getElementById("dateType1").checked)
            {
                var dateType = document.getElementById("predefinedDate").value;
                switch (dateType) {
                    case "1":
                        fromDate.setDate(toDate.getDate() - 14);
                        break;
                    case "2":
                        fromDate.setDate(toDate.getDate() - 30);
                        break;
                    case "3":
                        fromDate.setDate(toDate.getDate() - 90);
                        break;
                    case "4":
                        fromDate.setDate(toDate.getDate() - 180);
                        break;
                    case "5":
                        fromDate.setDate(toDate.getDate() - 365);
                        break;
                    default:
                        fromDate.setDate(toDate.getDate() - 30);
                        break;
                }

                fromDate = fromDate.getFullYear() + "-" + (fromDate.getMonth() + 1) + "-" + fromDate.getDate();
                toDate = toDate.getFullYear() + "-" + (toDate.getMonth() + 1) + "-" + toDate.getDate();
            }
            else {
                fromDate = document.getElementById("dateFrom").value;
                toDate = document.getElementById("dateTo").value;
            }

            var ranVal = Math.random();
            url += "?factoryId=" + factoryId + "&graphType=" + graphType + "&subGraphType=" + subGraphType;
            url += "&id=" + stackId + "&fromDate=" + fromDate + "&toDate=" + toDate + "&ran=" + ranVal;
            url = encodeURIComponent(url);
            var chart2 = new FusionCharts("../../Scripts/FusionCharts/Charts/MSLine.swf", "ChId1", "800", "600");
            chart2.setDataURL(url);
            chart2.render("chartArea");

            $("#chartName").text($("#subGraphType").find("option:selected").text());
        }

        function checkDateType(dateType)
        {
            document.getElementById("dateType" + dateType).checked = true;
            if (dateType == 1)
            {
                resetDateType();
            }
        }

        function showStacks(factoryId) {
            if (factoryId == "" || factoryId == 0) return;
            $("#factoryId").val(factoryId);
            $.ajax({ 
                    type: "POST",
                    url: "<%=Url.Content("~/Modification/ListStacks") %>",
                    data: "factoryId=" + factoryId + "&showType=2&resultType=json",
                    success: function (data) { 
                        $("#stackList").empty();
                        if (data != undefined) {
                            $.each(data, function (index, item) {
                                $("#stackList").append('<a href="javascript:void(0);" value=' + item.Value + ' onclick="showStackDateRange(' + item.Value + ');">' + item.Text + '</a>');
                                if (index % 4 == 0){ 
                                    $("#stackList").append("<br/>");
                                }
                            });
                        }
                    }
            });
        }

        function showStackDateRange(stackId) {
            $("#stackId").val(stackId);
            var showType = 2;
            $('#dateFrom').datepicker("destroy");
            $('#dateTo').datepicker("destroy");
            if (showType == 1) {
                $.ajax({ 
                        type: "POST",
                        url: "<%=Url.Content("~/Stack/GetDateRange") %>",
                        data: "stackId=" + stackId,
                        success: function (data) { 
                            var beginYear = data.BeginYear;
                            var endYear = data.EndYear;
                            $('#dateFrom').datepicker({ changeMonth: true, changeYear: true, reverseYearRange: 1, yearRange: beginYear + ":" + endYear });
                            $('#dateTo').datepicker({ changeMonth: true, changeYear: true, reverseYearRange: 1, yearRange: beginYear + ":" + endYear });
                        }
                });
            }
            else {
                $('#dateFrom').datepicker({changeMonth: true, changeYear: true});
                $('#dateTo').datepicker({changeMonth: true, changeYear: true});
            }
        }

        function showGraphTypes(id) {
            $("#graphTypes").empty();
        }

        function validForm() {
            var factoryId = document.getElementById("factoryId").value;
            if (factoryId == 0 || factoryId == "" || factoryId == undefined) {
                alert("请选择公司！");
                document.getElementById("factoryId").focus();
                return false;
            }

            <%if ((bool)ViewData["showStacks"]){ %>
            var stackId = document.getElementById("stackId").value;
            if (stackId == 0 || stackId == "" || stackId == undefined) {
                alert("请选择堆场/尾矿库！");
                document.getElementById("stackId").focus();
                return false;
            }
            <%} %>
            
            var graphType = document.getElementById("subGraphType").value;
            if (graphType == 0 || graphType == "" || graphType == undefined) {
                alert("请选择图表分类！");
                document.getElementById("subGraphType").focus();
                return false;
            }

            if (document.getElementById("dateType2").checked && document.getElementById("dateType2").value == 2)
            {
                var dateFrom = document.getElementById("dateFrom").value;
                if (dateFrom == 0 || dateFrom == "" || dateFrom == undefined) {
                    alert("请选择开始日期！");
                    document.getElementById("dateFrom").focus();
                    return false;
                }

                var dateTo = document.getElementById("dateTo").value;
                if (dateTo == 0 || dateTo == "" || dateTo == undefined) {
                    alert("请选择开始日期！");
                    document.getElementById("dateTo").focus();
                    return false;
                }
            }

            displayChart();
        }

        function resetDateType() {
            document.getElementById("dateFrom").value = "";
            document.getElementById("dateTo").value = "";
        }
    </script>


</asp:Content>
